<template>
	<div>
		<action-bar backTitle="返回" title="账单统计"></action-bar>
		<view>
			<view class="bg-white">
				<view class="text-black text-bold padding-xl text-xl text-center">人员收入统计</view>
				<qiun-data-charts class="charts-rotate" :ontouch="true" type="pie" :opts="pieUserIncomeOpts" :chartData="pieUserIncomeData" />
			</view>
			<view class="bg-white margin-tb-lg">
				<view class="text-black text-bold padding-xl text-xl text-center">人员支出统计</view>
				<qiun-data-charts class="charts-rotate" :ontouch="true" type="pie" :opts="pieUserOutcomeOpts" :chartData="pieUserOutcomeData" />
			</view>
			<view class="bg-white margin-tb-lg">
				<view class="text-black text-bold padding-xl text-xl text-center">收入分类统计</view>
				<qiun-data-charts class="charts-rotate" :ontouch="true" type="pie" :opts="pieIncomeOpts" :chartData="pieIncomeListData" />
			</view>
			<view class="bg-white margin-tb-lg">
				<view class="text-black text-bold text-xl padding-xl text-center">支出分类统计</view>
				<qiun-data-charts class="charts-rotate" :ontouch="true" type="pie" :opts="pieOutcomeOpts" :chartData="pieOutcomeListData" />
			</view>
		</view>
	</div>
</template>

<script>
	export default {
		
		onLoad(option) {
			
			const {bookId, date} = option
			
			this.bookId = bookId
			this.date = date
			
			if (bookId && date) {
				this.getBillListByMonthDate(bookId, date);
			} else {
				this.$message('请求失败');
			}
			
		},
		
		data() {
			return {
				bookId: '',
				date: '',
				
				pieUserIncomeOpts: {
					color: ["#3CA272"],
					extraOpts: {
						padding: [5,5,5,5],
						extra: {
							pie: {
								activeOpacity: 0.5,
								activeRadius: 10,
								offsetAngle: 0,
								labelWidth: 15,
								border: true,
								borderWidth: 3,
								borderColor: "#FFFFFF"
							}
						}
					},
				},
				pieUserOutcomeOpts: {
					color: ["#EE6666"],
					extraOpts: {
						padding: [5,5,5,5],
						extra: {
							pie: {
								activeOpacity: 0.5,
								activeRadius: 10,
								offsetAngle: 0,
								labelWidth: 15,
								border: true,
								borderWidth: 3,
								borderColor: "#FFFFFF"
							}
						}
					},
				},
				pieIncomeOpts: {
					color: ["#3CA272"],
					extraOpts: {
						padding: [5,5,5,5],
						extra: {
							pie: {
								activeOpacity: 0.5,
								activeRadius: 10,
								offsetAngle: 0,
								labelWidth: 15,
								border: true,
								borderWidth: 3,
								borderColor: "#FFFFFF"
							}
						}
					},
					// ...this.extraOpts
				},
				pieOutcomeOpts: {
					color: ["#EE6666"],
					// ...this.extraOpts
					extraOpts: {
						padding: [5,5,5,5],
						extra: {
							pie: {
								activeOpacity: 0.5,
								activeRadius: 10,
								offsetAngle: 0,
								labelWidth: 15,
								border: true,
								borderWidth: 3,
								borderColor: "#FFFFFF"
							}
						}
					},
				},
				
				extraOpts: {
					padding: [5,5,5,5],
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: true,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				},
				pieUserIncomeData: {
					series: [{
						data: []
					}]
				},
				pieUserOutcomeData: {
					series: [{
						data: []
					}]
				},
				pieIncomeListData: {
					series: [{
						data: []
					}]
				},
				pieOutcomeListData: {
					series: [{
						data: []
					}]
				}
			}
		},
		
		methods: {
			getBillListByMonthDate(bookId, date) {
				this.$request({
					url: `/bill/list/${bookId}/month/${date}`
				}).then(res => {
					const data = res.data.calculated
					const userIncomeData = []
					const userOutcomeData = []
					const incomeData = []
					const outcomeData = []
					
					for (let key in data.userIncome) {
						const _data = {}
						_data.name = key;
						_data.value = data.userIncome[key]
						_data.labelText = key + '-' + data.userIncome[key]
						userIncomeData.push(_data)
					}
					
					for (let key in data.userOutcome) {
						const _data = {}
						_data.name = key;
						_data.value = data.userOutcome[key]
						_data.labelText = key + '-' + data.userOutcome[key]
						userOutcomeData.push(_data)
					}
					
					for (let key in data.income) {
						const _data = {}
						_data.name = key;
						_data.value = data.income[key]
						_data.labelText = key + '-' + data.income[key]
						incomeData.push(_data)
					}
					
					for (let key in data.outcome) {
						const _data = {}
						_data.name = key;
						_data.value = data.outcome[key]
						_data.labelText = key + '-' + data.outcome[key]
						outcomeData.push(_data)
					}
					
					this.pieUserIncomeData.series[0].data = userIncomeData
					this.pieUserOutcomeData.series[0].data = userOutcomeData
					this.pieIncomeListData.series[0].data = incomeData
					this.pieOutcomeListData.series[0].data = outcomeData
				})
			}
		},
		
	}
</script>

<style>
	
</style>
